<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.101.0">
    <title>磐创软约评分系统</title>

    <link href="./bootstrap-4.6.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="./assets/css/carousel.css" rel="stylesheet">
    <link href="./element/index.css" rel="stylesheet">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>

</head>

<body>
    <div id="carouselApp">
        <header>
            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
                <a class="navbar-brand" href="#">{{contest.ruaName}}</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
                    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item" v-for="menu, index in menus" :key="menu.id"
                            :class="{ active: activeIndex === index }">
                            <a class="nav-link" href="#" @click="changePage(index, menu)">{{menu.text}}</a>
                        </li>
                    </ul>
                    <button class="btn btn-info my-2 my-sm-0" @click="logout">退出</button>
                </div>
            </nav>
        </header>
        <main role="main">
            <router-view></router-view>

            <hr class="featurette-divider">
            <!-- FOOTER -->
            <footer class="container">
                <p class="float-right"><a href="#">回到顶部</a></p>
                <p>&copy; {{year}} 双体系-磐创四部</p>
            </footer>
        </main>
    </div>

    <!-- home component -->
    <template id="home">
        <div>
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item" v-for="(carousel, index) in carousels"
                        :class="index == 0 ? 'active' : ''" :key="index">
                        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
                            role="img" aria-label=" :  " preserveAspectRatio="xMidYMid slice" focusable="false">
                            <title></title>
                            <rect width="100%" height="100%" fill="#777" />
                            <text x="50%" y="50%" fill="#777" dy=".3em"></text>
                            <image :xlink:href="carousel.img" class="img-responsive"></image>
                        </svg>

                        <div class="container">
                            <div class="carousel-caption text-left">
                                <h1>{{carousel.title}}</h1>
                                <p>{{carousel.text}}.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-target="#myCarousel" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </button>
            </div>
            <div class="container marketing">
                <div class="row">
                    <div class="col-lg-4" v-for="(speaker,index) in speakers" :key="speaker.plaId">
                        <svg class="bd-placeholder-img rounded-circle" width="200" height="200"
                            xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140"
                            preserveAspectRatio="xMidYMid slice" focusable="false">
                            <rect width="100%" height="100%" fill="#777" />
                            <image :xlink:href="speaker.avatar" class="img-responsive"></image>
                        </svg>

                        <h2>{{speaker.matSequence}}号选手 - {{speaker.matName}}</h2>
                        <p>{{speaker.matDeclaration}}</p>
                        <p><el-button :type="judgedSpeakers.includes(speaker.plaId) ? 'info' : 'primary'"
                                @click="judge(speaker)" :disabled="judgedSpeakers.includes(speaker.plaId)">去评分
                                &raquo;</el-button></p>
                    </div><!-- /.col-lg-4 -->
                </div><!-- /.row -->

            </div><!-- /.container -->


            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="100%">
                <el-form :model="form" :rules="rules" ref="scoreForm" style="text-align: center;">
                    <el-form-item label="" prop="score">
                        <el-input-number v-model="form.score" :precision="2" :step="0.1" :min="85"
                            :max="95"></el-input-number>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveScore">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </template><!-- home component end -->


    <!-- records component -->
    <template id="records">
        <div>
            <el-table :data="records" style="width: 100%">
                <el-table-column prop="recDate" label="评分时间"></el-table-column>
                <el-table-column prop="judName" label="评委"></el-table-column>
                <el-table-column prop="plaName" label="选手姓名"></el-table-column>
                <el-table-column prop="recScore" label="打分"></el-table-column>
            </el-table>
        </div>
    </template><!-- records component end -->

</body>

</html>
<script src="./assets/js/jquery-3.5.1.min.js"></script>
<script src="./bootstrap-4.6.2/js/bootstrap.bundle.min.js"></script>
<script src="./vue/vue-2.7.6.min.js"></script>
<script src="./vue/axios.min.js"></script>
<script src="./vue/vue-router-3.6.5.js"></script>
<script src="./element/index.js"></script>
<script src="./assets/js/constants.js"></script>
<script>
    const user = localStorage.getItem("user");
    const token = user ? JSON.parse(user).token : "";
    // if (!token) {
    //     location.href = "/";
    // }
    let ajax = axios.create({
        baseURL: baseURL,
        timeout: 5000
    });

    ajax.defaults.headers.common['Authorization'] = 'Bearer ' + token;

    const records = {
        template: "#records",
        data() {
            return {
                records: []
            }
        },
        methods: {
            findMyRecords() {
                ajax.post('/record/listByJudger').then(res => {
                    this.records = res.data.data;
                });
            }
        },
        created() {
            this.findMyRecords();
        }
    }

    const home = {
        template: "#home",
        data() {
            return {
                speakers: [],
                contest: {},
                carousels: [
                    { img: "./assets/images/a63a82977d3af6bd5492dded1c349ad.jpg", title: "精技术", text: "系统掌握企业实战核心技术，满足企业岗位技术要求" },
                    { img: "./assets/images/f1f929ada120f085f6524bdb30dc55a.jpg", title: "有经验", text: "具备实际项目开发经验，养成良好项目开发习惯" },
                    { img: "./assets/images/71606471114afc3d833160425489b75.jpg", title: "明职场", text: "明晰职场伦理职场规则，变身企业精英职场达人" }
                ],
                dialogFormVisible: false,
                form: {
                    score: 90.0
                },
                rules: {
                    score: [
                        { required: true, message: '分数不能为空', trigger: 'blur' }
                    ]
                },
                dialogTitle: "评分",
                judgedSpeakers: []
            }
        },
        methods: {
            listLastContestSpeakers() {
                ajax.post('/match/players')
                    .then(res => {
                        this.speakers = res.data.data;
                    });
            },
            judge(speaker) {
                this.form.plaId = speaker.plaId;
                this.form.ruaId = speaker.ruaId;
                this.dialogTitle = "给【" + speaker.matName + "】评分";
                this.dialogFormVisible = true;
                let temp = this.$refs['scoreForm'];
                if (temp) {
                    temp.resetFields();
                }
            },
            saveScore() {
                this.$refs['scoreForm'].validate(valid => {
                    if (valid) {
                        this.form.recScore = this.form.score.toString();
                        ajax.post('/record/score', this.form)
                            .then(res => {
                                if (res.data.code == 1) {
                                    this.$message.success('评分成功');
                                    this.judgedSpeakers.push(this.form.plaId);
                                    this.form = {};
                                    this.dialogFormVisible = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            })
                            .catch(res => {
                                this.$message.error(res.response.data);
                            });
                    } else {
                        return false;
                    }
                });
            },
            findMyRecords() {
                ajax.post('/record/listByJudger').then(res => {
                    this.judgedSpeakers = res.data.data.map(record => record.plaId);
                });
            }
        },
        created() {
            this.listLastContestSpeakers();
            this.findMyRecords();
        }
    }

    const router = new VueRouter({
        cache: false,
        routes: [
            { path: '/', redirect: '/home' },
            { path: '/home', component: home, name: 'Home' },
            { path: '/records', component: records, name: 'Records' }
        ]
    });

    let carouselApp = new Vue({
        el: "#carouselApp",
        data: {
            year: new Date().getFullYear(),
            contestName: '',
            menus: [
                { id: 1, text: "首页", name: "Home" },
                { id: 2, text: "我的评分", name: "Records" }
            ],
            activeIndex: 0,
            contest: {}
        },
        methods: {
            logout() {
                localStorage.removeItem("user");
                location.href = "/";
            },
            changePage(index, menu) {
                this.activeIndex = index;
                if (this.$route.name !== menu.name) {
                    this.$router.push({ name: menu.name });
                }
            },
            lastContest() {
                ajax.post('/ruanyue/last')
                    .then(res => {
                        this.contest = res.data.data;
                    });
            }
        },
        router,
        created() {
            this.lastContest();
        }
    });
</script>